<template>
  <div class="pagew11">
    <div class="contant fadeInDown">
      <p>2022年，“公文事务”流程<span class="yellowfont">1300</span>余个，处理量<span class="yellowfont">197万</span>次。</p>
      <p>实现从集团总部到子集团直属二级公司的贯穿，助力各公司各部门高效协同。</p>
      <p></p>

    </div>
    <div class="img1">
      <div class="wd">
        <img class="left1 animate__bounceInLeft" src="../../assets/images/bill2022/w11/tlr.png">
        <img class="left2 animate__bounceInLeft2" src="../../assets/images/bill2022/w11/ywd.png">
        <img class="center animate__opacity" src="../../assets/images/bill2022/w11/gw.png">
        <img class="right1 animate__bounceInLeft3" src="../../assets/images/bill2022/w11/hy.png">
        <img class="right2 animate__bounceInLeft4" src="../../assets/images/bill2022/w11/ysp.png">
        <img class="right3 animate__opacity" src="../../assets/images/bill2022/w11/topIcon.png" alt="">
      </div>
      <div class="jsc ">
        <img class="tpwz" src="../../assets/images/bill2022/w11/gwwz.png">
        <img src="../../assets/images/bill2022/w11/jsc.png">
      </div>

    </div>
  </div>
</template>

<script>

export default {

  components: {
  },
  // 定义属性
  data () {
    return {

    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {

  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
}
</script>

<style lang='less' scoped>
.pagew11 {
  display: flex;
  align-items: center;
  flex-direction: column;
  .contant {
    margin-top: 3rem;
    width: 38.5rem;
    text-align: left;
    font-size: 2.1rem;
    font-family: PingFang SC, PingFang SC-Semibold;
    font-weight: 400;
    color: #fefefe;
    line-height: 3.2rem;

    .yellowfont {
      color: #fbd858;
      font-weight: 600;
      font-size: 2.25rem;
      padding-right: 0.4rem;
    }
  }
  .img1 {
    width: 100%;
    position: absolute;
    bottom: 0;
    .jsc {
      position: relative;
      .tpwz {
        position: absolute;
        width: 8rem;
        z-index: 6;
        bottom: 16rem;
        left: 41%;
      }
    }

    .wd {
      position: relative;
      bottom: 16rem;

      .left1 {
        position: absolute;
        width: 22rem;
        bottom: -16rem;
        left: 0rem;
        z-index: 3;
      }

      .left2 {
        position: absolute;
        width: 18.5rem;
        bottom: -27rem;
        left: -2rem;
        z-index: 4;
      }

      .center {
        position: absolute;
        width: 12rem;
        bottom: -20rem;
        left: 17rem;
        z-index: 5;
      }

      .right1 {
        position: absolute;
        width: 22rem;
        bottom: -18rem;
        right: 2rem;
        z-index: 1;
      }

      .right2 {
        position: absolute;
        width: 18rem;
        bottom: -24rem;
        right: 2rem;
        z-index: 2;
      }
      .right3 {
      position: absolute;
      width: 10rem;
      bottom: -3rem;
      right: 10rem;
      
    }
    }

    img {
      width: 100%;
    }
  }
}

  .swiper-slide-active .fadeInDown {
    animation: fadeInDown 1s ease-in-out;
    animation-iteration-count: 1;
  }

  @keyframes fadeInDown {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -20%, 0);
      transform: translate3d(0, -20%, 0);
    }

    100% {
      opacity: 1;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
    }
  }

  @keyframes fadeInUp {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
      transform: scale3d(0);
      -webkit-transform: scale3d(0);
    }

    to {
      opacity: 1;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      transform: scale3d(1);
      -webkit-transform: scale3d(1);
    }
  }

  .swiper-slide-active .animate__backInUp {
    animation: backInUp 1s ease-in-out;
    animation-iteration-count: 1;
  }

  @keyframes backInUp {
    0% {
      -webkit-transform: translateY(4000px) scale(0.4);
      transform: translateY(4000px) scale(0.4);
      opacity: 0.7;
    }

    to {
      -webkit-transform: translateY(0) scale(1);
      transform: translateY(0) scale(1);
      opacity: 1;
    }
  }
  @keyframes bounceInLeft {
    0%,
    60%,
    75%,
    90%,
    to {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
      opacity: 0;
      -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
      transform: translate3d(-3000px, 0, 0) scaleX(3);
    }

    60% {
      opacity: 1;
      -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
      transform: translate3d(25px, 0, 0) scaleX(1);
    }

    75% {
      -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
      transform: translate3d(-10px, 0, 0) scaleX(0.98);
    }

    90% {
      -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
      transform: translate3d(5px, 0, 0) scaleX(0.995);
    }

    to {
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
    }
  }

  .swiper-slide-active .animate__bounceInLeft {
    animation: bounceInLeft 2s ease-in-out;
    animation-iteration-count: 1;
  }
  .swiper-slide-active .animate__bounceInLeft2 {
    animation: bounceInLeft 2.2s ease-in-out;
    animation-iteration-count: 1;
  }
  @keyframes bounceInRight {
    0%,
    60%,
    75%,
    90%,
    to {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
      opacity: 0;
      -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
      transform: translate3d(3000px, 0, 0) scaleX(3);
    }

    60% {
      opacity: 1;
      -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
      transform: translate3d(-25px, 0, 0) scaleX(1);
    }

    75% {
      -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
      transform: translate3d(10px, 0, 0) scaleX(0.98);
    }

    90% {
      -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
      transform: translate3d(-5px, 0, 0) scaleX(0.995);
    }

    to {
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
    }
  }

  .swiper-slide-active .animate__bounceInLeft3 {
    animation: bounceInRight 2.4s ease-in-out;
    animation-iteration-count: 1;
  }
  .swiper-slide-active .animate__bounceInLeft4 {
    animation: bounceInRight 2.6s ease-in-out;
    animation-iteration-count: 1;
  }

  @keyframes opacitys {
    0% {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .swiper-slide-active .animate__opacity {
    animation: opacitys 3s ease-in-out;
    animation-iteration-count: 1;
  }

</style>